<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/backstage' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>评分</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card>
    <div class="model">
        <div colspan="8" align="center"><font size=5>  软件工程学院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ this.studentInfo.class }}&nbsp;&nbsp;&nbsp;&nbsp;姓名:{{ this.studentInfo.name }}&nbsp;&nbsp;&nbsp;&nbsp;2020-2021 学年度&nbsp;&nbsp;&nbsp;&nbsp;一 学期</font></div>
      <label1 ref="myChild"></label1>
    </div>
    <div class="model but">
      <el-autocomplete placeholder="请输入搜索内容" v-model="searchValue" :fetch-suggestions="searchStu" @select="search" clearable style="width: 300px">
        <el-button slot="append" size="mini" icon="el-icon-search" @click="search" style="margin: 0"></el-button>
      </el-autocomplete>
      <span style="color:rgb(64,158,255);float:left;margin:20px;font-size:20px">当前评价第{{studentList.i+1}},还需评价{{studentList.total-studentList.i-1}}</span><br>

      <div  style="float:left;width:100%;text-align:left;margin:20px">
        <span>班级：{{studentInfo.class }} </span><br>
        <span>学号：{{ studentInfo.id }}</span><br>
        <span>姓名：{{ studentInfo.name }}</span><br>
      </div>
      <el-row >
        <el-button type="primary" @click=before>上一张</el-button>
        <el-button type="warning" @click=save>暂存</el-button>
        <el-button type="primary" @click=after>下一张</el-button><br>
        <el-button style="width: 265px" type="success" @click=submit>提交</el-button><br>
      </el-row>
      <span style="color:#303133;"><el-link @click="dialogVisible=true">签名</el-link></span>
      <img :src="this.studentInfo.signImg" alt="" style="width: 320px;height: 320px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">

      <span style="color:#DCDCDC">厦门市熵时光科技有限公司评分系统</span>

      <el-dialog :visible.sync="dialogVisible" width="30%">
        <signature ref="sign" class="model" :session="this.session" :student_id="this.studentInfo.id"></signature>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="overWrite">重 写</el-button>
          <el-button type="primary" @click="signSave">确 定</el-button>
        </div>

      </el-dialog>
    </div>

  </el-card>
</div>
</template>

<script>
import label1 from "../label/label";
import signature from "./signature";
import axios from "axios";
export default {
  name: "Submit",
  components:{
    label1,
    signature
  },
  data(){
    return{
      studentList:{
        i:1,
        total:10,
        list:[1,2,3,4,5],
      },
      studentInfo:{
        name:'student',
        id:'1912120000',
        class:'19级软件工程',
        signImg:''
      },
      dialogVisible:false,
      suggest:[],
      searchValue:'',
      session:this.$cookieStore.getCookie('session')
    }
  },
  async mounted() {
    await this.getStudent();
    await this.before();
  },
  methods:{
    async getStudent() {
      const res = await axios.get('/api/api/api/getUserMarkList?session_key='+this.session)
      const {code,msg,data} = res.data
      if (code==200){
        this.studentList.list = data.Mark_List
        this.studentList.total = data.Mark_List.length
        this.$message.success(msg)
      }
    },
    submit(){
      this.$refs.myChild.submit();
    },
    async before(){
      if (this.studentList.i>0){
        this.studentList.i-=1
        await this.$refs.myChild.getScore(this.studentList.list[this.studentList.i].student_id);
        await this.getStuInfo(this.studentList.list[this.studentList.i].student_id)
        await this.getSign()
      }
    },
    async after(){
      if (this.studentList.i<this.studentList.total-1){
        this.studentList.i+=1
        await this.$refs.myChild.getScore(this.studentList.list[this.studentList.i].student_id);
        await this.getStuInfo(this.studentList.list[this.studentList.i].student_id)
        await this.getSign()
      }
    },
    save(){

    },
    async signSave(){
      this.dialogVisible=false
      await this.$refs.sign.save()
      await this.getSign()
    },
    overWrite() {
      this.$refs.sign.overwrite()
    },
    async searchStu(queryString, cb){
      let params ={
        session_key:this.session,
        student_id:queryString
      }
      const res = await axios.post('/api/api/api/searchStuForm',params)
      const {code,msg,data} = res.data
      if (code==200){
        this.suggest=data
        for (const index in data) {
          this.suggest[index].value=data[index].id.toString()
        }
        cb(this.suggest)
      }
    },
    async getStuInfo(uid){
      let params ={
        session_key:this.session,
        student_id:uid
      }
      const res = await axios.post('/api/api/api/searchStuForm',params)
      const {code,msg,data} = res.data
      if (code==200){
        this.studentInfo.id=data[0].id
        this.studentInfo.name=data[0].name
        this.studentInfo.class=data[0].class_name
      }
    },
    async search(){
      await this.getStuInfo(this.searchValue)
      await this.$refs.myChild.getScore(this.searchValue)
      await this.getSign()
    },
    async getSign(){
      let params={
        session_key:this.session,
        student_id:this.studentInfo.id
      }
      this.studentInfo.signImg=''
      const res = await axios.post('/api/api/api/getStuSign',params)
      const {data,msg,code} = res.data
      if (code==0){
        this.studentInfo.signImg=data.signImg
      }
    }
  }
}
</script>

<style scoped>
.model{
  display: inline-block;
  vertical-align: top;
}
.but{
  margin: 5px 0 0 10px;
  width: 320px;
  border: #ebeef5 solid 1px;
  text-align: center;
  padding: 10px;
}
.but *{
  margin: 10px 5px;
}
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 17px;
}

.btn_switch {
  text-align: center;
}

.operation {
  text-align: center;
}
</style>
